<?php $this->headStyle()->captureStart()?>
#fieldset-mainForm , #fieldset-subForm ,#fieldset-otherForm {float:left;margin:5px}
ul.errors{color:red}
.teaArea {float:left;margin:5px}
#tabs {float:left;font-size:13px;margin:10px;width:720px}
#list-teacher {overflow: auto;
	height:330px;
	margin:5px;
	padding:2px;
	border:#dde 1px solid;
	cursor: pointer;
	white-space: nowrap;

}
.man-icon {background:url(images/boy.png)}
.woman-icon {background:url(images/girl.png)}
.even {background:#ffe}
.odd {background:#ddf}
.sel_teacher {background:#ff0}

<?php $this->headStyle()->captureEnd()?>
<?php $this->headScript()
->appendFile($this->js('jquery-ui/ui/jquery.ui.datepicker.js'))
->appendFile($this->js('jquery-ui/ui/jquery.ui.tabs.js'))
->appendFile($this->js('plugins/jquery.form.js'))
->appendFile($this->js('jquery-plugins/ajaxupload.3.0.js'))
?>
<script type="text/javascript">
	$(document).ready(function(){
		getTeacher('<?php echo $this->teacher_list[0]['username']?>');

		$("#birthday").datepicker({ dateFormat: 'yy-mm-dd'});
		$("#appoint_date").datepicker({ dateFormat: 'yy-mm-dd' });
		$("#approve_date").datepicker({ dateFormat: 'yy-mm-dd' });
		$("#arrive_date").datepicker({ dateFormat: 'yy-mm-dd' });

		$("#select_state").change(function(){
			$("#selform").submit();
		});

		$("#tabs").tabs();

		// 選單著色
		$("#list-teacher tr:odd").addClass('odd');
		$("#list-teacher tr:even").addClass('even');

		// 選擇教師
		$("#list-teacher tr").click(function(){
			getTeacher($(this).attr('id'));
		});

		//更改姓名
		$("#name").change(function(){
			$('.sel_teacher').find('td:last').html($(this).val());
		});

		// 檢查帳號是否重複
		$("#username").change(function(){
			$.getJSON('<?php echo $this->route("checkuser")?>/username/'+$(this).val(),function(response){
				if (response) {
					alert('<?php echo $this->translate("same account")?> : '+response);
					$('#username').val($('#old_username').val()).focus();
				}
			});
		});

		// 定義 ajax from
		$("#teaForm").ajaxForm({
				dataType:  'json',
				success: showResponse
		});

		function showResponse(res)
		{
			$(".ui-state-error").removeClass('ui-state-error');

				var error=0
				$.each(res,function(i,val){
					$("#"+i).addClass('ui-state-error');
					error = 1;
				});

				if (error)
					alert("<?php echo $this->translate('Update failed!')?>");
				else {
					$("#system-message").html('<?php echo $this->translate('save completed')?>').show().hide('blind');
					if ($("#select_state").val() != $("#condition_state").val() || $("#old_username").val()=='' ) {
						//$("#select_state").val($("#condition_state").val());
						//$("#select_state").trigger('change');
						var id = $(".sel_teacher").next().attr('id');
						$(".sel_teacher").remove();
					}
					$(".sel_teacher").attr('id',$("#username").val());
					$(".sel_teacher .td-name").html($("#name").val());
					$(".sel_teacher .td-title_name").html($("#current_title_sn option:selected").text());
					if ($("#sex").val() == 'M')
						$(".sel_teacher .td-sex img").attr('src','<?php echo $this->baseUrl?>/images/boy.png');
					else
						$(".sel_teacher .td-sex img").attr('src','<?php echo $this->baseUrl?>/images/girl.png');

					// 自動換下一位
					if ($("#nextRecord").attr('checked'))
						var id = $(".sel_teacher").next().attr('id');

						getTeacher(id);
				}

		}

		$("#newTeacherBtn").click(function(){
			$("#teaForm").clearForm();
			$("#old_username").val('');
			$("#list-teacher .sel_teacher").removeClass('sel_teacher');
			$("#username").focus();
			$("#photo").html('');

		})

		$("#deleteTeacherBtn").click(function(){
			if (confirm("<?php echo $this->translate('Determined to delete')?>")){
				$.get('<?php echo  $this->route("delete")?>/id/'+$("#old_username").val(),function(data){
					$("#select_state").trigger('change');
					});
			}
		});


		// 上傳照片處理
		var upload_img = new AjaxUpload('#upload_img', {
			action: '<?php echo  $this->route('uploadphoto')?>',
			onSubmit : function(file , ext){
				if (! (ext && /^(jpg|png|jpeg)$/.test(ext))){
					// extension is not allowed
					alert('<?php echo $this->translate('error image type')?>');
					// cancel upload
					return false;
					}
					this.setData({'username':$("#old_username").val()});
			},

			name: 'photo',
			onComplete : function(file,response){
				//alert(response);
				 var temp = '<img src="<?php echo  $this->route('teacherimg')?>/photo/'+response+'"/>';
				$("#photo").html(temp);

			}

		});

	// get a teacher data
	function getTeacher(id) {
		$.getJSON('<?php echo $this->route("getteacher")?>/username/'+id, function(data){
			if (data) {
				if ($('#name').attr('disabled')==true)
					$('#main_content :input').attr('disabled', false);
					$.each(data, function(i,item){
					if ($("input[name="+i+"]").attr('type')=='radio'){
						$("#"+i+"-"+item).attr('checked','checked');
					}else {
						$("#"+i).val(item);
					}
					});
					$(".update_time").html(data.update_time);
					$("#old_username").val(data.username);

					$("#tabs .ui-state-error").removeClass('ui-state-error');
					$("#list-teacher .sel_teacher").removeClass('sel_teacher');
					$("#"+id).addClass('sel_teacher');

					// 照片
					var temp = '<span style="pagging:20px;"><?php echo $this->translate('yet upload')?></span>';
					if (data.photo_name)
					 temp = '<img src="<?php echo  $this->route("teacherimg")?>/photo/'+data.photo_name+'"/>';
					$("#photo").html(temp);
					upload_img.enable();

			}
		}
		);


	}

	});

</script>
<div style="float:left;width:200px;">
<form method="post" action="" id="selform">
<?php echo  $this->select_state?>
<div id="list-teacher">
<table>
<?php $man=0;$woman=0;?>
<?php foreach($this->teacher_list as $val):?>
<tr id="<?php echo $val['username']?>">
<td class="td-sex"><img src="<?php echo $this->baseUrl?>/images/<?php if($val['sex']=='M'):?>boy<?php else:?>girl<?php endif?>.png"></td>
<td class="td-title_name"><?php echo $val['title_name']?></td>
<td class="td-name"><?php echo $val['name']?></td></tr>
<?php if ($val['sex']=='M')$man++; if ($val['sex']=='F')$woman++;?>
<?php endforeach?>
</table>
</div>
</form>
<div style="text-align:right;margin-right:15px">
<span style="margin:3px;"><img src="<?php echo $this->baseUrl?>/images/boy.png"><?php echo $man?></span>
<span style="margin:3px;"><img src="<?php echo $this->baseUrl?>/images/girl.png"><?php echo $woman?></span>
<span style="margin:3px;"><img src="<?php echo $this->baseUrl?>/images/Clients.png"><?php echo  count($this->teacher_list)?></span>
</div>
<div>
<input type="button" id="newTeacherBtn" value="<?php echo  $this->translate('add teacher')?>" />
<input type="button" id="deleteTeacherBtn" value="<?php echo  $this->translate('delete teacher')?>" />
</div>
</div>
<form id="teaForm" action="<?php echo  $this->route('set')?>" method="post">
<div id="tabs">
	<ul>
		<li><a href="#tabs-1"><?php echo  $this->translate('mainArea')?></a></li>
		<li><a href="#tabs-2"><?php echo  $this->translate('subArea')?></a></li>
	</ul>
<div id="tabs-1">
<div class="teaArea">
<?php echo  $this->teacher->username?>
<?php echo  $this->teacher->name?>
<?php echo  $this->teacher->english_name?>
<?php echo  $this->teacher->identification_number?>
<?php echo  $this->teacher->birthday?>
<?php echo  $this->teacher->sex?>
<?php echo  $this->teacher->marriaged?>
<?php echo  $this->teacher->disability?>
<?php echo  $this->teacher->born_place?>

</div>
<div class="teaArea">
<?php echo  $this->teacher->condition_state?>
<?php echo  $this->teacher->current_kind_sn?>
<?php echo  $this->teacher->current_title_sn?>
<?php echo  $this->teacher->current_office_id?>
<?php echo  $this->teacher->phone_home?>
<?php echo  $this->teacher->phone_office?>
<?php echo  $this->teacher->phone_mobile?>
<?php echo  $this->teacher->website?>
<?php echo  $this->teacher->address?>
</div>
<div class="teaArea">
<div style="margin:5px;padding:3px;width:135px;height: 150px;border: #ccc thin dotted" id="photo"></div>
<p>
<input type="button" id="upload_img" value="<?php echo $this->translate('upload photo')?>" />
</p>
<br />
<?php echo  $this->teacher->save?>
<br />
<input type="checkbox" id="nextRecord"><label for="nextRecord"><?php echo  $this->translate('next record')?></label>
</div>
</div>
<div id="tabs-2">
<div class="teaArea">

<?php echo  $this->teacher->education_level?>
<?php echo  $this->teacher->overseas?>
<?php echo  $this->teacher->certification_type?>
<?php echo  $this->teacher->certification_number?>
<?php echo  $this->teacher->certification_subject?>
<?php echo  $this->teacher->appoint_date?>
<?php echo  $this->teacher->arrive_date?>
<?php echo  $this->teacher->approve_date?>
</div>
<div class="teaArea">
<?php echo  $this->teacher->approve_number?>
<?php echo  $this->teacher->post_number?>
<?php echo  $this->teacher->bywork_number?>
<?php echo  $this->teacher->memo?>
<?php echo  $this->teacher->save?>
</div>
</div>
<input type="hidden" name="old_username" id="old_username" />
<input type="hidden" name="state" id="state" value="" />
</form>
<?php //echo $this->teacher?>

</div>

<div style="clear:both"></div>